<template>
  <div class="grid_list">
    <div class="grid_item">
      <div class="img_box">
        <img src="@/assets/image/banner/zhongchuhong.jpg" />
      </div>
      <div class="p_box">
        <h4>专注前端</h4>
        <p>
          专业前端开发团队，资深前端开发工程师。紧跟前端发展方向，协助快速入手高效率开发。
        </p>
      </div>
    </div>
    <div class="grid_item">
      <div class="img_box">
        <img src="@/assets/image/banner/wangzuxian.jpg" />
      </div>
      <div class="p_box">
        <h4>模板完整</h4>
        <p>
          提供下载链接的模板均保证完整性，预览所见即所得。在线支持项目启动遇到问题。
        </p>
      </div>
    </div>
    <div class="grid_item">
      <div class="img_box">
        <img src="@/assets/image/banner/yeqianwen.jpg" />
      </div>
      <div class="p_box">
        <h4>数据调试</h4>
        <p>提供后台数据接口供前端开发人员学习使用，真实还原开发场景。</p>
      </div>
    </div>
    <div class="grid_item">
      <div class="img_box">
        <img src="@/assets/image/banner/lizi.jpg" />
      </div>
      <div class="p_box">
        <h4>技术探索</h4>
        <p>保持学习，紧跟技术走向。勇于跳出舒适区，迎接挑战。</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
.grid_list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  .grid_item {
    width: 290px;
    border: 1px solid #e3d3d3;
    background-color: #fff;
    &:hover {
      .img_box {
        transform: translateY(-10px);
        img {
          width: 120%;
          height: 120%;
        }
      }
    }
    .img_box {
      height: 160px;
      background: rgba(0, 0, 0, 0.4);
      padding: 5px;
      overflow: hidden;
      transform: translateY(0px);
      transition: transform 800ms ease-in-out;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 300ms ease-in-out;
      }
    }
    .p_box {
      padding: 5px 15px;
      h4 {
        font-size: 18px;
        color: #db1e1e;
        font-weight: 600;
        margin: 5px 0 10px;
      }
      p {
        font-size: 14px;
        color: #666;
        line-height: 22px;
      }
    }
  }
}
</style>